<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			#container {
				height: 300px;
				min-width: 310px;
				max-width: 800px;
			}
		</style>
		<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
		<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	</head>
	<body>
		<!--
*************************************************************************
   Generated by JShare at 2020-05-31 14:33:19
   From: https://jshare.com.cn/demos/FhVyQk
*************************************************************************
 -->
		<ul>
			<li><a href="/" style="color: #FFC107;">登录页</a></li>
			<li><a href="/index/" style="color: #FFC107;">主页</a></li>
			<li><a href="/show/" style="color: #FFC107;">图像展示</a></li>
		</ul>
		<div id="container"></div>
		<button id="large" onclick="setSize(800)">设置宽度为 800px</button>
		<button id="small" onclick="setSize(400)">设置宽度为 400px</button>
		<script>
			var chart = Highcharts.chart('container', {
				chart: {
					type: 'column'
				},
				title: {
					text: '症状对比柱状图'
				},
				subtitle: {
					text: '响应式切换位置和样式'
				},
				legend: {
					align: 'right',
					verticalAlign: 'middle',
					layout: 'vertical'
				},
				xAxis: {
					categories: ['2016', '2017', '2018'],
					labels: {
						x: -10
					}
				},
				yAxis: {
					allowDecimals: false,
					title: {
						text: '情感因子量'
					}
				},
				series: [{
					name: '神经质',
					data: [5, 2, 1]
				}, {
					name: '掩饰性',
					data: [3, 5, 3]
				}, {
					name: '内外向',
					data: [2, 3, 6]
				}],
				responsive: {
					rules: [{
						condition: {
							maxWidth: 500
						},
						chartOptions: {
							legend: {
								align: 'center',
								verticalAlign: 'bottom',
								layout: 'horizontal'
							},
							yAxis: {
								labels: {
									align: 'left',
									x: 0,
									y: -5
								},
								title: {
									text: null
								}
							},
							subtitle: {
								text: null
							},
							credits: {
								enabled: false
							}
						}
					}]
				}
			});

			function setSize(width) {
				chart.setSize(width, 300);
			}
		</script>
	</body>
</html>
